<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
	ul,input{margin:0;padding:0;}
	li{list-style: none;font-size: 14px;}
	.music{width:400px; height: 240px;border: 1px solid #eee;}
	.music li{height: 30px;line-height:30px; padding-left:10px;}
	.music span{}
	.song {display: inline-block; width: 240px; padding-left: 4px;}
	.select{font-size: 14px; height: 30px;line-height: 30px;border-top: 1px solid #eee; padding-left:10px;}
</style>
<script type="text/javascript">
window.onload = function(){
	var aInp = document.getElementsByTagName('input');
	var aLi = document.getElementsByTagName('li');
	var len = aInp.length;
	var arr = ['#fff','#f7ffff']

	//全选
	aInp[len-1].onclick = function (){
		for (var i = 0; i < len-1; i++) {
			if (aInp[len-1].checked) {			
					aInp[i].checked = true;			
			} else{	
					aInp[i].checked = false;	
			};
		}	
	}

	//鼠标移入
	for (var i = 0; i < aLi.length; i++) {
		aLi[i].index = i;
		aLi[i].style.background = arr[i%arr.length];	//背景色

		aLi[i].onmouseover = function (){				//移入
			this.style.backgroundColor = '#eee';
		}

		aLi[i].onmouseout = function (){				//移出
			this.style.backgroundColor = arr[this.index%arr.length];
			
		}
	};

}
</script>
</head>
<body>
<div class="music">
	<ul>
		<li>
			<input type="checkbox" /> 
			<span class="song">私奔</span>
			<span>梁博</span>
		</li>
		<li>
			<input type="checkbox" /> 
			<span class="song">北京北京</span>
			<span>梁博，黄勇</span>
		</li>
		<li>
			<input type="checkbox" /> 
			<span class="song">我爱你中国</span>
			<span>梁博</span>
		</li>
		<li>
			<input type="checkbox" /> 
			<span class="song">我爱你中国</span>
			<span>梁博</span>
		</li>
		<li>
			<input type="checkbox" /> 
			<span class="song">我爱你中国</span>
			<span>梁博</span>
		</li>
		<li>
			<input type="checkbox" /> 
			<span class="song">我爱你中国</span>
			<span>梁博</span>
		</li>
		<li>
			<input type="checkbox" /> 
			<span class="song">我爱你中国</span>
			<span>梁博</span>
		</li>
	</ul>
	<div class="select">
		<label for="all"><input type="checkbox" id="all"/> 全选</label>
	</div>
</div>
</body>
</html>